<template>
    <el-row class="container">
      <el-col :space="24" class="header">
        <!-- 系统名称-->
        <el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
          {{collapsed?'':sysName}}
        </el-col>
        <!-- 用户信息 -->
<!--        <el-col :span="4" class="userinfo">-->
<!--          <el-dropdown trigger="hover">-->
<!--            <span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" style="width: 40px; height: 40px;border-radius: 20px" /> {{sysUserName}}</span>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              <el-dropdown-item>我的消息</el-dropdown-item>-->
<!--              <el-dropdown-item>设置</el-dropdown-item>-->
<!--              <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->
<!--        </el-col>-->
      </el-col>
      <el-col :space="24" class="main">
        <aside :class="collapsed?'menu-collapsed':'menu-expanded'">
          <!--导航菜单-->
          <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            @open="handleopen"
            @close="handleclose"
            @select="handleselect"
            unique-opened router v-show="!collapsed"
          >
            <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
              <el-submenu :index="index+''" v-if="!item.leaf">
                <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
                <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
              </el-submenu>
              <el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
            </template>
          </el-menu>
        </aside>

        <section class="content-container">
          <div class="grid-content bg-purple-light">

            <el-col :span="24" class="content-wrapper">
              <transition name="fade" mode="out-in">
                <router-view></router-view>
              </transition>
            </el-col>
          </div>
        </section>
      </el-col>
    </el-row>
</template>

<script>

  export default {
    name: "Main",
    data: function () {
      return {
        sysName:'zhizhi',
        collapsed:false,
        sysUserName: 'abc',
        sysUserAvatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596002605185&di=96a55958e56f1e257302d4a2037afade&imgtype=0&src=http%3A%2F%2Ftupian.qqw21.com%2Farticle%2FUploadPic%2F2020-6%2F2020617225141628.jpg',
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods:{
      onSubmit() {
        console.log('submit!');
      },
      handleopen() {
        //console.log('handleopen');
      },
      handleclose() {
        //console.log('handleclose');
      },
      handleselect: function (a, b) {
      },
      //退出登录
      logout: function () {
        var _this = this;
        this.$confirm('确认退出吗?', '提示', {
          //type: 'warning'
        }).then(() => {
          sessionStorage.removeItem('user');
          _this.$router.push('/login');
        }).catch(() => {

        });


      },
      //折叠导航栏
      collapse:function(){
        this.collapsed=!this.collapsed;
      },
      showMenu(i,status){
        this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
      }
    }
  }
</script>

<style scoped>
  .container{
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
  }
  .header{
    height: 60px;
    line-height: 60px;
    background-color: #20a0ff;
    color:#fff;
  }
  .userinfo {
    text-align: right;
    padding-right: 35px;
    float: right;
  }
  .userinfo-inner {
    cursor: pointer;
    color: #fff;
  }
  .userinfo-inner img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    margin: 10px 0px 10px 10px;
    float: right;
  }
  .logo {

    height:60px;
    font-size: 22px;
    padding-left:20px;
    padding-right:20px;
    border-color: rgba(238,241,146,0.3);
    border-right-width: 1px;
    border-right-style: solid;
  }
  .logo img {
    width: 40px;
    float: left;
    margin: 10px 10px 10px 18px;
  }
  .logo .txt {
    color:#fff;
  }
  .logo-width{
    width:230px;
  }
  .logo-collapse-width{
    width:60px
  }
  .tools{
    padding: 0px 23px;
    width:14px;
    height: 60px;
    line-height: 60px;
    cursor: pointer;
  }

  .main {
    display: flex;
    position: absolute;
    top: 60px;
    bottom: 0px;
    overflow: hidden;
  }

  aside {
    flex: 0 0 230px;
    width: 230px;
  }
  .el-menu{
    height: 100%;
  }

  .collapsed {
    width: 60px;
  }
  .item{
    position: relative;
  }
  .submenu{
    position:absolute;
    top:0px;
    left:60px;
    z-index:99999;
    height:auto;
    display:none;
  }
  .menu-collapsed{
    flex:0 0 60px;
    width: 60px;
  }
  .menu-expanded{
    flex:0 0 230px;
    width: 230px;
  }
  .content-container {

    flex:1;

    overflow-y: scroll;
    padding: 20px;
  }

  .breadcrumb-container .title {
    width: 200px;
    float: left;
    color: #475669;
  }
  .breadcrumb-container  .breadcrumb-inner {
    float: right;
  }
  .content-wrapper {
    background-color: #fff;
    box-sizing: border-box;
  }

</style>
